<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/bm/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/bm/data/css/thesame.css" media="all">
    <link rel="stylesheet" href="../static/bm/data/css/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/tree.css" media="all">
    <link rel="stylesheet" href="../static/bm/data/css/popCss.css" media="all">
</head>

<body class="layui-layout-body">
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="scroll-box bgWhite box-shadows border-radius4">
        <div class="add-box-scroll">
            <div class="pad20px">
                <article>
                    <nav class="pandect-con">
                        <ul>
                            <li class="border-radius4 box-shadows2 mr10px haircut-con">
                                <div style="background: url(../static/bm/img/icon_lf.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
                                <nav class="pandect-con haircut-nav">
                                    <h1>理发信息总览</h1>
                                    <ul>
                                        <li>
                                            <h1 id="lifaNum"></h1>
                                            <p>总人数</p>
                                        </li>
                                        <li>
                                            <h1 id="lifaPin"></h1>
                                            <p>年度累计核销次数</p>
                                        </li>
                                        <li>
                                            <h1 id="lifaHair"></h1>
                                            <p>年度累计派发次数</p>
                                        </li>
                                    </ul>
                                </nav>
                            </li>
                            <li class="border-radius4 box-shadows2 ml10px haircut-con">
                                <div style="background: url(../static/bm/img/icon_fr.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
                                <nav class="pandect-con haircut-nav">
                                    <h1>缝纫信息总览</h1>
                                    <ul>
                                        <li>
                                            <h1 id="fengrenNum"></h1>
                                            <p>总人数</p>
                                        </li>
                                        <li>
                                            <h1 id="fengrenPin"></h1>
                                            <p>年度累计核销次数</p>
                                        </li>
                                        <li>
                                            <h1 id="fengrenHair"></h1>
                                            <p>年度累计派发次数</p>
                                        </li>
                                    </ul>
                                </nav>
                            </li>
                        </ul>
                    </nav>
                    <!--<div class="border-bot1px pb25px pt30px overflow-visible">
                        <div class="inline-block add-mess-child lh32px mr30px">
                            <div class="left">
                                <label>村居范围：</label>
                            </div>
                            <div class="add-mess-form left relative">
                                &lt;!&ndash; <p class="add-mess-form-tree"><input type="text" placeholder="请输入" ></p>
                                 <div class="tree-con-box">
                                     <div class="border-bot1px pl20px pr20px lh45px gray"><span class="mr10px">/</span><span>无上级组织</span></div>
                                     <ul class="tree-one">

                                     </ul>
                                 </div>&ndash;&gt;
                                <div id="treeTwo" class="add-mess-form">
                                    <p class="add-mess-form-tree"><input readonly autocomplete="off" id="selectParentOrg" type="text" placeholder="请输入" class="form-input"></p>
                                    <div class="tree-con-box">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="inline-block lh32px overflow">
                            <p class="left">时间范围：</p>
                            <p class="left layui-time-img">
										<span class="layui-input-inline" style="width: 180px;">
											<input type="text" readonly placeholder="请选择" class="layui-input time-img test-item" id="time1">
										</span>
                                <span>&nbsp;至&nbsp;</span>
                                <span class="layui-input-inline" style="width: 180px;">
											<input type="text" readonly placeholder="请选择" class="layui-input time-img test-item" id="time2">
										</span>
                            </p>
                            <p class="left ml40px"><span class="white border-radius4 bgGreen block pl20px pr20px mr20px" onclick="searchBtn()">查&nbsp;询</span></p>
                        </div>
                    </div>-->
                </article>
                <article class="mt20px">
                    <nav class="pandect-con">
                        <ul>
                            <li class="border-radius4 box-shadows2 pad20px mr10px">
                                <h1 class="mb15px fb f20px ages">优惠券使用年龄分布</h1>
                                <div class="data-width mt30px ages">
                                    <div id="main3" class="data-main" style="width: 100%; height: 260px;"></div>
                                </div>
                                <dl class="textCenter pad25px" id="m3" style="display: none">
                                    <dt><img src="../static/bm/img/icon_zwsj.png" alt=""></dt>
                                    <dd class="gray mt25px">暂无数据</dd>
                                </dl>
                            </li>
                            <li class="border-radius4 box-shadows2 pad20px ml10px">
                                <!--                                <h1 class="mb15px fb f20px">近6月优惠券使用率</h1>-->
                                <h1 class="mb15px fb f20px mms"></h1>
                                <div class="data-width mms">
                                    <div id="main4" class="data-main" style="width: 100%; height: 260px;"></div>
                                </div>
                                <dl class="textCenter pad25px" id="m4" style="display: none">
                                    <dt><img src="../static/bm/img/icon_zwsj.png" alt=""></dt>
                                    <dd class="gray mt25px">暂无数据</dd>
                                </dl>
                            </li>
                        </ul>
                    </nav>
                </article>
                <article class="mt20px">
                    <nav class="pandect-con">
                        <ul>
                            <li class="border-radius4 box-shadows2 pad20px mr10px">
                                <div class="lh32px overflow mb20px border-bot1px">
                                    <h1 class="mb15px fb f20px left">理发店核销情况排名</h1>
                                    <p class="right cursor">
                                        <span class="white border-radius4 bgGreen inline-block pl15px pr15px" onclick="downLoadExcelByType1()">导出表格</span>
                                        <!--                                        <span class="white border-radius4 bgGreen inline-block pl15px pr15px ml20px">打印</span>-->
                                    </p>
                                </div>
                                <div class="layui-tab layui-tab-child layui-tab-child-cur" style="margin: 0;">
                                    <div class="layui-form layui-tab" lay-filter="liveConditionFilter">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this" value="1">本月</li>
                                            <li value="2">本年</li>
                                        </ul>
                                        <p class="right f14px lh32px cursor" onclick="lookLook()">查看全部<img src="../static/bm/img/icon_right_arrow.png" alt="" class="ml10px" style="vertical-align: -3px;"></p>
                                    </div>
                                    <div class="layui-tab-content" style="padding: 0;">
                                        <div class="layui-tab-item layui-show">
                                            <div class="data-width" id="data1">
                                                <div id="main1" class="data-main" style="width: 100%; height: 260px;"></div>
                                            </div>
                                            <dl class="textCenter pad25px" id="main11" style="display: none">
                                                <dt><img src="../static/bm/img/icon_zwsj.png" alt=""></dt>
                                                <dd class="gray mt25px">暂无数据</dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="border-radius4 box-shadows2 pad20px ml10px">
                                <div class="lh32px overflow mb20px border-bot1px">
                                    <h1 class="mb15px fb f20px left">缝纫店核销情况排名</h1>
                                    <p class="right cursor">
                                        <span class="white border-radius4 bgGreen inline-block pl15px pr15px mr20px" onclick="downLoadExcelByType2()">导出表格</span>
                                        <!--                                        <span class="white border-radius4 bgGreen inline-block pl15px pr15px">打印</span>-->
                                    </p>
                                </div>
                                <div class="layui-tab layui-tab-child layui-tab-child-cur" style="margin: 0;">
                                    <div class="layui-form layui-tab" lay-filter="liveConditionFilter2">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this" value="1">本月</li>
                                            <li value="2">本年</li>
                                        </ul>
                                        <p class="right f14px lh32px cursor" onclick="lookLook2()">查看全部<img src="../static/bm/img/icon_right_arrow.png" alt="" class="ml10px" style="vertical-align: -3px;"></p>
                                    </div>
                                    <div class="layui-tab-content" style="padding: 0;">
                                        <div class="layui-tab-item layui-show">
                                            <div class="data-width" id="data2">
                                                <div id="main2" class="data-main" style="width: 100%; height: 260px;"></div>
                                            </div>
                                            <dl class="textCenter pad25px" id="main22" style="display: none">
                                                <dt><img src="../static/bm/img/icon_zwsj.png" alt=""></dt>
                                                <dd class="gray mt25px">暂无数据</dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </nav>
                </article>
                <article class="mt20px">
                    <div class="border-radius4 box-shadows2 pad20px mr10px">
                        <div class="overflow">
                            <h1 class="mb15px fb f20px left">近12月优惠券使用趋势图</h1>
                            <div class="right gray legend legend-one">
                                <span>理发店</span>
                                <span>缝纫店</span>
                            </div>
                        </div>
                        <div class="data-width">
                            <div id="main5" class="data-main" style="width: 100%; height: 260px;"></div>
                            <dl class="textCenter pad25px" id="jin12" style="display: none">
                                <dt><img src="../static/bm/img/icon_zwsj.png" alt=""></dt>
                                <dd class="gray mt25px">暂无数据</dd>
                            </dl>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</div>
<div id="pop-con" style="display: none">
    <div class="pop-up">
        <!-- 血糖记录-新增记录 -->
        <div>
            <div class="pop-title relative overflow mb15px">
                <span class="ml15px">理发店核销情况排名</span>
                <p class="right cursor"><img src="../static/bm/img/close_icon.png" class="block pop-close">
                <p>
            </div>
            <div class="mt30px mb30px">
                <div id="main1-1" style="width: 700px; height: 260px;"></div>
            </div>
            <!--  <div class="btn-con textCenter">
                  <span class="btn-two">提交</span>
              </div>-->
        </div>
    </div>
</div>


<div id="pop-con2" style="display: none">
    <div class="pop-up">
        <!-- 血糖记录-新增记录 -->
        <div>
            <div class="pop-title relative overflow mb15px">
                <span class="ml15px">缝纫店核销情况排名</span>
                <p class="right cursor"><img src="../static/bm/img/close_icon.png" class="block pop-close">
                <p>
            </div>
            <div class="mt30px mb30px">
                <div id="main1-2" style="width: 700px; height: 260px;"></div>
            </div>
            <!--  <div class="btn-con textCenter">
                  <span class="btn-two">提交</span>
              </div>-->
        </div>
    </div>
</div>
<script src="../static/bm/js/jquery-2.1.3.min.js"></script>
<script src="../static/bm/layui/layui.js" charset="utf-8"></script>
<script src="../static/bm/js/echarts.min.js" charset="utf-8"></script>
<script src="../static/bm/js/data2.js" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/treeTwo.js}" charset="utf-8"></script>


<script>
    $("div.data-main").each(function () {
        let width = $(this).parent("div.data-width").width();
        $(this).css("width", width + "px");
    })
</script>
<script>

    $(function () {

        //左侧菜单栏
        layui.use(['element', 'carousel', 'laydate', 'layer'], function () {
            var layer = layui.layer;
            var laydate = layui.laydate;
            lay('.test-item').each(function () {
                laydate.render({
                    elem: this,
                    trigger: 'click',
                });
            });

        });

        getLiFaOrFengRenByFlag(1);
        getLiFaOrFengRenByFlag(2);

    });


    //弹层
    function layerOpen() {
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: ['750px', ''],
            shade: 0.6,
            id: 'payCons', //设定一个id，防止重复弹出
            /*,btn: ['确认支付']*/
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            shadeClose: true, //设置允许点遮罩关闭
            content: $("div#pop-con"),
            success: function () {
                //关闭弹层
                $(".pop-close").click(function () {
                    layer.closeAll();
                });
            },

        });
    }

    //弹层2
    function layerOpen2() {
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: ['750px', ''],
            shade: 0.6,
            id: 'payCons', //设定一个id，防止重复弹出
            /*,btn: ['确认支付']*/
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            shadeClose: true, //设置允许点遮罩关闭
            content: $("div#pop-con2"),
            success: function () {
                //关闭弹层
                $(".pop-close").click(function () {
                    layer.closeAll();
                });
            },

        });
    }


    //理发、缝纫信息总览
    function getLiFaOrFengRenByFlag(flag) {
        var data = {flag: flag};
        $.ajax({
            url: "../data/getLiFaOrFengRenByFlag",
            type: "get",
            async: false,
            dataType: "json",
            data: data,
            success: function (data) {
                if (data.code == 200) {
                    if (flag == 1) {
                        $("#lifaNum").text(data.userNum);
                        $("#lifaPin").text(data.pinNum);
                        $("#lifaHair").text(data.hairNum);
                    } else if (flag == 2) {
                        $("#fengrenNum").text(data.userNum);
                        $("#fengrenPin").text(data.pinNum);
                        $("#fengrenHair").text(data.hairNum);
                    }
                }
            }
        })
    }

    var flag = "1";

    function downLoadExcelByType1() {
        window.location.href = "../data/exportExcel?type=1&flag=" + flag
    }

    function downLoadExcelByType2() {
        window.location.href = "../data/exportExcel?type=2&flag=" + flag
    }


    function lookLook() {
        layerOpen();
    }

    function lookLook2() {
        layerOpen2();
    }


    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }


</script>
</body>
</html>
